<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="layui/css/modules/layer/default/layer.css">
    <style>
        .main {
            margin: 0 auto;
            width: 960px;
            height: auto;
            overflow: hidden;
        }

        .main .one {
            width: 100%;
            height: 500px;
            margin-top: 85px;
            margin-bottom: 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
        }

        .main .two {
            width: 100%;
            height: 200px;
            margin-bottom: 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
        }

        .main .three {
            width: 100%;
            height: 300px;
            margin-bottom: 50px;
            background-color: #fff;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
            overflow-y: scroll;
        }

        .one .title {
            color: #999;
            padding-left: 20px;
            padding-top: 10px;
            font-size: 14px;
        }

        .one .img {
            width: 400px;
            height: 400px;
            margin-top: 20px;
            margin-left: 20px;
        }

        .info {
            float: right;
            margin-right: 100px;
            margin-top: 15px;
        }

        .info h1:nth-of-type(1) {
            font-size: 24px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 340px;
        }

        .info h2:nth-of-type(1) {
            font-size: 20px;
            color: #EF5350;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .info h2:nth-of-type(2) {
            font-size: 16px;
            color: #aaa;
            margin-bottom: 15px;
        }

        .public {
            margin-bottom: 15px;
        }

        .public img {
            width: 25px;
            vertical-align: middle;
        }

        .public span {
            vertical-align: middle;
        }

        .public p {
            font-size: 16px;
            color: #000;
        }

        .pnologin {
            font-size: 20px;
            padding-top: 40px;
            box-sizing: border-box;
        }

        .item-contact {
            width: 280px;
            height: 195px;
        }

        .item-contact .login {
            margin-top: 5px;
        }

        .item-contact .login img {
            width: 30px;
            vertical-align: middle;
        }

        .item-contact .login span {
            font-size: 16px;
            line-height: 40px;
            margin-left: 15px;
            vertical-align: middle;
        }

        .item-pub-time {
            font-size: 14px;
            color: #999;
        }

        .eregist,
        .elogin {
            cursor: pointer;
            color: #EF5350;
            font-size: 20px;
        }

        .two h1 {
            padding: 10px 10px 10px 20px;
            color: #000;
            font-size: 20px;
            font-weight: 600;
        }

        .three h1 {
            padding: 10px 10px 10px 20px;
            color: #000;
            font-size: 20px;
            font-weight: 600;
        }

        .hr1 {
            border: none;
            border-top: 5px solid #0bb9f8;
            width: 110px;
            display: inline-block;
            margin-left: 10px;
        }

        .hr2 {
            display: inline-block;
            width: 810px;
            border: none;
            border-top: 2px solid #d9d9d9;
        }

        .two p {
            line-height: 25px;
            padding: 10px 20px;
            font-size: 16px;
        }

        .three .comment {
            padding: 15px;
            border-bottom: 1px solid #ddd;
            font-size: 16px;
            line-height: 25px;
        }

        .three .comment p span {
            color: #0bb9f8;
        }

        .three .comment p:last-child {
            font-size: 14px;
            color: #999;
        }

        .doComm {
            margin-bottom: 20px;
        }

        .doComm img {
            width: 40px;
            float: left;
            margin-top: 20px;
            margin-left: 20px;
        }

        textarea {
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            margin-top: 20px;
            margin-left: 20px;
            font-size: 16px;
        }

        .bnologin {
            border: none;
            border-radius: 2px;
            display: inline-block;
            height: 36px;
            line-height: 36px;
            outline: 0;
            padding: 0 2rem;
            text-transform: uppercase;
            vertical-align: middle;
            margin-left: 50px;
            margin-bottom: 35px;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
        }

        .blogin {
            border: none;
            border-radius: 2px;
            display: inline-block;
            height: 36px;
            line-height: 36px;
            outline: 0;
            padding: 0 2rem;
            text-transform: uppercase;
            vertical-align: middle;
            margin-left: 50px;
            margin-bottom: 35px;
            color: #fff;
            background-color: #0bb9f8;
            cursor: pointer;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
        }

        .addfocus,
        .pay {
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
</head>

<body>
<div class="nav white">
    <div class="left">
        <a href="/index"><img src="img/nav.png"></a>
        <span>闲易二手市场</span>
    </div>
    <div class="search">
        <input type="text" class="goodsInfo">
        <button>搜索</button>
    </div>
    <div class="change">
        <span class="login">登录</span>
        <span class="regist">注册</span>
    </div>
    <div class="right">
        <button>我要发布</button>
    </div>

    <div class="li">
        <ul>
            <a href="/user" target="_blank"><li>个人中心</li></a>
            <li class="removelogin">退出登录</li>
        </ul>
    </div>

</div>

<div class="main">
    <div class="one">
        <p class="title">
        </p>

        <img class="img">

        <div class="info">
            <h1 class="name"></h1>
            <h2 class="price"></h2>
            <h2>原价：<span style="text-decoration:line-through;" class="realprice"></span></h2>
            <div class="public">
                <p>
                    <span>可讲价</span>
                    <img src="img/map.png">
                    <span class="location">闲易市场</span>
                </p>
            </div>
            <div class="publisher-info-title">
                <span>卖家信息</span>
                <hr>
            </div>
            <div class="item-contact">
                <p class="pnologin">
                    <a class="elogin">登录</a>
                    <span>或</span>
                    <a class="eregist">注册</a>
                    <span>后查看联系信息</span>
                </p>

            </div>

            <h1 class="polishtime"></h1>
        </div>


    </div>
    <div class="two">
        <h1>商品描述</h1>
        <hr class="hr1">
        <hr class="hr2">
        <p></p>
    </div>
    <div class="three">
        <h1>评论</h1>
        <hr class="hr1">
        <hr class="hr2">
        <div class="c">
            <!-- <p><span>效力：</span>很不错 </p>
            <p>2018-04-27 10:05:36</p> -->
        </div>

        <div class="doComm">
            <img src="img/comment.png">
            <textarea id="doComm" placeholder="这里写下评论"></textarea>
            <button>评论</button>
        </div>
    </div>
</div>
<script src="layui/layui.all.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/url.js"></script>

<script>

    var id = ARR["id"];


    getComAndInfos(id);
    function getComAndInfos(goodsId) {
        $.ajax({
            type: "post",
            url: "/goods/getComAndInfos",
            data: {
                goodsId: goodsId
            },
            dataType: "json",
            success: function (data) {
                var data = data.data;
                console.log(data)
                var html = "";
                var userInfo = data.userInfo;
                var comments = data.comments;
                var goods = data.goods;

                $(".title").text(goods.catelog + ">" + goods.name);
                $(".name").text(goods.name);
                $(".price").text(goods.price);
                $(".realprice").text(goods.realprice);
                $(".polishtime").text("发布于 " + goods.startTime);
                $(".img").attr("src","/upload/goods/"+goods.imgUrl);

                $(".two p").text(goods.describle);
                var html2 = "";
                for (var i = 0; i < comments.length; i++) {
                    html2 += `<div class="comment">
                <p><span>${comments[i].user}：</span>${comments[i].content} </p>
                <p>${comments[i].create_at}</p>
            </div>`
                }
                $(html2).appendTo(".c");

                if (localStorage.getItem("phone")) {
                    $(".item-contact").empty();
                    $(".doComm button").addClass("blogin");
                    var html = "";
                    html += `<p class="login">
                        <img src="img/user.png">
                        <span>${userInfo.username}</span>
                    </p><p class="login">
                        <img src="img/phone.png">
                        <span>${userInfo.phone}</span>
                    </p><p class="login">
                        <img src="img/QQ.png">
                        <span>${userInfo.qq}</span>
                    </p>
                    <button data-goodsid=${id} class="blogin addfocus">加入关注</button>
                    <button  data-id=${id}  class="blogin pay">在线支付</button>
                    `;
                    $(html).appendTo(".item-contact")
                } else {
                    $(".doComm button").addClass("bnologin");
                    $(".doComm button").attr("disabled", "disabled");
                }
            }
        });
    }




    $(".elogin").click(function () {
        location.href='/login'
    });
    $(".eregist").click(function () {
        location.href='/regist'
    });

    $(".doComm button").click(function () {
        // alert(1)
        var phone = localStorage.getItem("phone");
        var goodsId = id;
        var comment = $("#doComm").val().trim();
        if (comment == null || comment == "") {
            layer.open({
                title: '信息',
                content: '请填写评论!'
            });
        } else {
            doComm(phone, goodsId, comment);
        }

    })

    function doComm(phone, goodsId, comment) {
        $.ajax({
            type: "post",
            url: "/comments/doComm",
            data: {
                phone: phone,
                goodsId: goodsId,
                comment: comment
            },
            xhrFields: {
                withCredentials: true
            },
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    layer.open({
                        title: '信息',
                        content: '评论失败！'
                    });
                } else if (data.code == 1) {
                    layer.open({
                        title: '信息',
                        content: '评论成功！',
                        yes:function () {
                            window.location.reload();
                        }
                    });

                }
            }
        });
    }

    $("body").on("click", ".addfocus", function () {
        addfocus(id);

    })
    $("body").on("click", ".pay", function () {
        var id=$(this).data("id");
        window.open("/user?id=" + id);
    })


    /**
     添加关注
     */
    function addfocus(goodsId) {
        $.ajax({
            type: "post",
            url: "/focus/addFocus",
            data: {
                goodsId: goodsId
            },
            xhrFields: {
                withCredentials: true
            },
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {

                    layer.open({
                        title: '信息',
                        content: data.message
                    });

                } else if (data.code == 1) {
                    layer.open({
                        title: '信息',
                        content: '关注成功！'
                    });

                }
            }
        });
    }

    $(".removelogin").click(function () {
         localStorage.clear();
        window.location.reload();
    })


    $(".search button").click(function () {
        var goodsInfo=$(".goodsInfo").val();
        if(goodsInfo=="" || goodsInfo==null){
            layer.msg("搜索不可为空！");
            return;
        }
        window.location.href="/index?goodsInfo="+goodsInfo;
    })

















</script>
</body>

</html>